<template>
    <van-nav-bar title="视频详情" right-text="首页" left-arrow background="linear-gradient(90deg, #D09D69 0%, #E0C1A1 100%)"
        text-light @click-left="onClickLeft" @click-right="onClickRight" />
    <video width="100%" height="240" controls :poster="videofrom.coverUrl">
        <source :src="videofrom.videoUrl" type="video/mp4">
    </video>
    <div>
        <img src="https://p3.dcarimg.com/img/tos-cn-i-dcdx/255f0d51d42e4066b3ad5e7e7ec5c785~tplv-dcdx-origin.image"
            alt="" width="40" height="20"> &nbsp;
        <span style="font-size: 20px;">{{ videofrom.videoName }}</span>
        <div class="vtext">
            <van-row gutter=" 2">
                <van-col span="8">视频博主：{{ videofrom.authorId }}</van-col>
                <van-col span="5">{{ videofrom.viewCount }}万次播放</van-col>
                <van-col span="11">{{videofrom.createdTime}}发布</van-col>
            </van-row>
        </div>
    </div>
    <h3>相关阅读</h3>
    <div></div>
    <van-row style="background-color: #ccd1d5;">
        <van-col span="18">
            <div>银河M9对比理想L9！20万差价区别究竟有多大？</div>
            <div>山谷激情跳跃的音 11万次播放</div>
        </van-col>
        <van-col span="6">
            <video width="100%" height="100%" poster="http://www.hphs.com/images/shipinfengmian.png">
                <source src="http://www.hphs.com/mp4/qcsp.mp4" type="video/mp4">
            </video>
        </van-col>

    </van-row>
</template>

<script setup>
import { onMounted ,ref} from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
import { CatModelApi } from '../../api';
import { reactive } from 'vue';

// 页面加载的时候直接渲染数据 生命周期钩子函数 渲染后执行的方法
onMounted(() => { 
    console.log(route.query.id);
    videofrom.id = route.query.id;
    CallCatModelApi()
    videoListApi()
})

const videofrom = reactive({
    id: '',
    authorId: '',
    coverUrl: '',
    videoName: '',
    videoUrl: '',
    viewCount: '',
    createdTime:''
})
const videolist = ref([])

const CallCatModelApi = () => { 
    CatModelApi.select.call({ id: videofrom.id}).then(res => { 
        console.log(res);
        videofrom.authorId = res[0].authorId;
        videofrom.coverUrl = res[0].coverUrl;
        videofrom.videoName = res[0].videoName;
        videofrom.videoUrl = res[0].videoUrl;
        videofrom.viewCount = res[0].viewCount;
        videofrom.createdTime = res[0].createdTime;
    })
}
const videoListApi = () => { 
    CatModelApi.select.call({}).then(res => { 
        console.log(res);
       


    })
}


const onClickLeft = () => history.back();
const onClickRight = () => { 
    console.log("跳转到首页");
    
}
</script>

<style scoped>
.vtext {
    font-size: 13px;
    color: gray;
    margin-top: 5px;
    margin-bottom: 5px;
}
</style>